<template>
    <div>
        <!-- Loading Container -->
        <div class="loading-container">
            <div class="loading-progress">
                <div class="rotator">
                    <div class="rotator">
                        <div class="rotator colored">
                            <div class="rotator">
                                <div class="rotator colored">
                                    <div class="rotator colored"></div>
                                    <div class="rotator"></div>
                                </div>
                                <div class="rotator colored"></div>
                            </div>
                            <div class="rotator"></div>
                        </div>
                        <div class="rotator"></div>
                    </div>
                    <div class="rotator"></div>
                </div>
                <div class="rotator"></div>
            </div>
        </div>
        <!--  /Loading Container -->
        <!-- Navbar -->
        <div class="navbar">
            <div class="navbar-inner">
                <div class="navbar-container">
                    <!-- Navbar Barnd -->
                    <div class="navbar-header pull-left">
                        <a href="#/" class="navbar-brand">
                            <small>
                                <img src="/admin/assets/img/logo.png" alt="" />
                            </small>
                        </a>
                    </div>
                    <!-- /Navbar Barnd -->

                    <!-- Sidebar Collapse -->
                    <div class="sidebar-collapse" id="sidebar-collapse">
                        <i class="collapse-icon fa fa-bars"></i>
                    </div>
                    <!-- /Sidebar Collapse -->
                    <!-- Account Area and Settings --->
                    <div class="navbar-header pull-right">
                        <div class="navbar-account">
                            <ul class="account-area">
                                <li>
                                    <a class="login-area dropdown-toggle" data-toggle="dropdown">
                                        <div class="avatar" title="View your public profile">
                                            <img v-bind:src="user.avatar">
                                        </div>
                                        <section>
                                            <h2><span class="profile"><span>{{ user.name }}</span></span></h2>
                                        </section>
                                    </a>
                                    <!--Login Area Dropdown-->
                                    <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
                                        <li class="username"><a>{{ user.name }}</a></li>
                                        <li class="email"><a>{{ user.email }}</a></li>
                                        <!--Avatar Area-->
                                        <li>
                                            <div class="avatar-area">
                                                <img v-bind:src="user.avatar" class="avatar">
                                                <span class="caption hidden">Change Photo</span>
                                            </div>
                                        </li>
                                        <!--Avatar Area-->
                                        <li class="edit">
                                            <a href="profile.html" class="pull-left">Profile</a>
                                            <a href="#" class="pull-right">Setting</a>
                                        </li>
                                        <!--Theme Selector Area-->
                                        <li class="theme-area">
                                            <ul class="colorpicker" id="skin-changer">
                                                <li><a class="colorpick-btn" href="#" style="background-color:#5DB2FF;" rel="/admin/assets/css/skins/blue.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#2dc3e8;" rel="/admin/assets/css/skins/azure.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#03B3B2;" rel="/admin/assets/css/skins/teal.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#53a93f;" rel="/admin/assets/css/skins/green.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#FF8F32;" rel="/admin/assets/css/skins/orange.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#cc324b;" rel="/admin/assets/css/skins/pink.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#AC193D;" rel="/admin/assets/css/skins/darkred.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#8C0095;" rel="/admin/assets/css/skins/purple.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#0072C6;" rel="/admin/assets/css/skins/darkblue.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#585858;" rel="/admin/assets/css/skins/gray.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#474544;" rel="/admin/assets/css/skins/black.min.css"></a></li>
                                                <li><a class="colorpick-btn" href="#" style="background-color:#001940;" rel="/admin/assets/css/skins/deepblue.min.css"></a></li>
                                            </ul>
                                        </li>
                                        <!--/Theme Selector Area-->
                                        <li class="dropdown-footer">
                                            <a href="javascript:;" @click="logout">
                                                Sign out
                                            </a>
                                        </li>
                                    </ul>
                                    <!--/Login Area Dropdown-->
                                </li>
                                <!-- /Account Area -->
                                <!--Note: notice that setting div must start right after account area list.
                                no space must be between these elements-->
                                <!-- Settings -->
                            </ul><div class="setting">
                            <a id="btn-setting" title="Setting" href="#">
                                <i class="icon glyphicon glyphicon-cog"></i>
                            </a>
                        </div><div class="setting-container">
                            <label>
                                <input type="checkbox" id="checkbox_fixednavbar">
                                <span class="text">Fixed Navbar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedsidebar">
                                <span class="text">Fixed SideBar</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedbreadcrumbs">
                                <span class="text">Fixed BreadCrumbs</span>
                            </label>
                            <label>
                                <input type="checkbox" id="checkbox_fixedheader">
                                <span class="text">Fixed Header</span>
                            </label>
                        </div>
                            <!-- Settings -->
                        </div>
                    </div>
                    <!-- /Account Area and Settings -->
                </div>
            </div>
        </div>
        <!-- /Navbar -->
        <!-- Main Container -->
        <div class="main-container container-fluid">
            <!-- Page Container -->
            <div class="page-container">
                <!-- Page Sidebar -->
                <div class="page-sidebar" id="sidebar">
                    <!-- Page Sidebar Header-->
                    <div class="sidebar-header-wrapper">
                        <input type="text" class="searchinput" />
                        <i class="searchicon fa fa-search"></i>
                        <div class="searchhelper">Search Reports, Charts, Emails or Notifications</div>
                    </div>
                    <!-- /Page Sidebar Header -->
                    <!-- Sidebar Menu -->
                    <nav-menu :navigation="navigation" :index="0"></nav-menu>
                    <!-- /Sidebar Menu -->
                </div>
                <!-- /Page Sidebar -->
                <!-- Page Content -->
                <div class="page-content">
                    <!-- Page Breadcrumb -->
                    <div class="page-breadcrumbs">
                        <ul class="breadcrumb">
                            <li>
                                <i class="fa fa-home"></i>
                                <a href="#/">首页</a>
                            </li>
                            <li class="active" v-for="item in $root.$data.breadcrumb">
                                {{ item }}
                            </li>
                        </ul>
                    </div>
                    <!-- /Page Breadcrumb -->
                    <!-- Page Header -->
                    <div class="page-header position-relative">
                        <div class="header-title">
                            <h1>
                                {{ $root.$data.headerTitle }}
                            </h1>
                        </div>
                        <!--Header Buttons-->
                        <div class="header-buttons">
                            <a class="sidebar-toggler" href="#">
                                <i class="fa fa-arrows-h"></i>
                            </a>
                            <a class="refresh" id="refresh-toggler" href="">
                                <i class="glyphicon glyphicon-refresh"></i>
                            </a>
                            <a class="fullscreen" id="fullscreen-toggler" href="#">
                                <i class="glyphicon glyphicon-fullscreen"></i>
                            </a>
                        </div>
                        <!--Header Buttons End-->
                    </div>
                    <!-- /Page Header -->
                    <!-- Page Body -->
                    <div class="page-body">
                        <router-view/>
                    </div>
                    <!-- /Page Body -->
                </div>
                <!-- /Page Content -->
            </div>
            <!-- /Page Container -->
            <!-- Main Container -->

        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    export default {
        mounted() {
            /**
             * 全局指令：颗粒权限
             * 注：在此注册指令需在当前组件添加路由
             */
            Vue.directive('owns', {
                inserted: (el, binding) => {
                    let owns = 'admin.' + this.$route.name + '.' + binding.arg;
                    if (!this.permissions[owns]){
                        // $(el).remove();
                    }
                }
            });

            // 动态添加路由
            this.$router.addRoutes(Laravel.router);

            // 初始化页面事件
            InitiateSideMenu();
            InitiateSettings();
            InitiateWidgets();

        },
        data(){
            return {
                user: Laravel.user,
                navigation: this.treeChildren(Laravel.navigation),
                permissions: Laravel.permissions,
            }
        },
        methods: {
            // 退出登录
            logout(){
                this.post('logout').then(() => {
                    window.location.href = '/admin/login';
                });
            }
        }
    }
</script>
